<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 
			Vue模板语法有2大类：
				1.插值语法：
					功能：用于解析标签体内容。<h3>你好，{{name}}</h3>
					写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，或者函数调用返回值
				2.指令语法：
					href="school.url"普通的标签属性，值是school.url
					功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
					举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx被解析为js表达式，
								且可以直接读取到data中的所有属性。
					备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
					v-if、v-model
		 -->
  <!-- 准备好一个容器-->
  <div id="app">
    <h1>差值语法</h1>
    <h3>你好：{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a href="school.url">点我去{{school.name}}学习</a>
    <a v-bind:href="school.url">点我去{{school.name}}学习</a>
    <a :href="school.url">点我去{{school.name}}学习</a>
  </div>
  <script src="vue.js"></script>
  <script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    //创建vue实例
    new Vue({
      el: '#app',
      data: {
        name: 'zhansgan',
        school: {
          name: 'situ',
          url: 'http://www.situ.com'
        }
      }
    })
  </script>
</body>

</html>